Auth0でTwilio Flexにシングルサインオンしてみる

森亮介

2020.04.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Twilio Flexを構築したがユーザー管理どうしよ？

というのも、Twilio FlexのUIにログインするには２種類方法があります。

1つはTwilioのダッシュボードからFlexを起動する方法、これはTwilioにログインできる管理者限定となります。少人数での検証としてなら管理者を増やすことは可能ですが、本番環境に近くなってくると管理者を増やすことは現実的ではありません。

もう1つは既存のIDプロバイダーと統合して、ユーザー（エージェント、スーパーバイザー、または管理者）を認証し、シングルサインオン（SSO）をする方法です。本番環境で運用していくならこの方法が良いと考えています。

サポートされているIDプロバイダー(IDP)との統合

SAML2.0に対応するIDPとの統合が可能です。例えば以下のIDPです。

Okta
Microsoft Azure
Google
Salesforce
Microsoft ADFS

こういったものと統合することにより、企業アカウントをFlexのIDプロバイダーとして使用できるようになります。

これらの統合方法は公式のドキュメントに記載されていますのでご確認ください。

FlexでのSSOおよびIdPの構成

今回の記事では公式には載っていないAuth0をIDPとしたSSOを試そうと思います。

やるよ

必要なもの

Twilio Flex(サービスプロバイダー)のプロジェクト
Auth0(IDプロバイダー)のアカウント

必須属性について

IDPから任意の数のクレーム（キーと値のペア）をFlexに提供する必要があります。必須なのは

roles
- admin
  - UIのすべてのページへのアクセスを許可
- supervisor
  - エージェントデスクトップ、チーム、キュー統計、およびダイヤルパッド（有効な場合）へのアクセスを許可
- agent
  - エージェントデスクトップとダイヤルパッドへのアクセスを許可
full_name
- ログインユーザーの名前
email
- ログインユーザーのメールアドレス

となっています。

その他の属性に関してはこちらのドキュメントを参照してください。

Auth0でアプリケーションを作成する

Auth0をIDPとするため、Auth0上でアプリケーションを作成します。

Auth0にログインし、左メニューのApplicationsをクリックし、そのページでCreate Applicationのボタンを押します。

NameにFlexのIDPだとわかるような名前をつけ、application typeにはRegular Web Applicationにします。

上記の内容で作成した後、Addonsをクリックし、SAML2 WEB APPのトグルをオンにします。

オンにすると設定画面が表示されるので、以下の内容を記述します。

Application Callback URL
- https://iam.twilio.com/v1/Accounts/[Twilio FlexプロジェクトのSID]/saml2

SAMLトークンをPOSTする先のURLです。

Settings

{
  "audience": "https://iam.twilio.com/v1/Accounts/[Twilio FlexプロジェクトのSID]/saml2/metadata",
  "mappings": {
    "email": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress"
  },
  "signResponse": true,
  "nameIdentifierFormat": "urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress",
  "nameIdentifierProbes": [
    "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress"
  ]
}

TwilioではNameID形式を次のように設定する必要があります.

urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress

SAMLレスポンスに署名する必要もあるので, signResponseをtrueにします。

設定が終わったらUsageタブをクリックし、必要な情報をメモしておきます。

Twilio Flex側に設定する必要があるもので、

Issuer
Identity Provider Certificate (ダウンロードします)
Identity Provider Login URL

Auth0でRulesを作成する

Flexが要求している属性を作るため、Ruleを使ってカスタマイズします。

full_name、rolesを作ります。

左ナビゲーションのRulesをクリックし、設定画面にある CREATE RULE をクリックします。

テンプレートを選択する画面でEmpty ruleを選択します。

Nameには任意の名前を入力し、Scriptには以下の内容を記載し保存します(とりあえず動作するように書きました)。

function mapSamlAttributes(user, context, callback) {
  if(context.clientID !== '[作成したアプリケーションのクライアントID]'){
    return callback(null, user, context);
  }

  var userGroups = user.app_metadata.flex_role;

  function mapGroupToRole(flexGroup) {
    return userGroups[flexGroup];
  }

  user.flexRole = Object.keys(userGroups).map(mapGroupToRole);

  context.samlConfiguration.mappings = {
    'roles': 'flexRole',
    'full_name': 'name', 
    'image_url': 'picture'
  };
  console.log(user.flexRole);
  callback(null, user, context);
}

roles属性に入れる値は、ユーザーのapp_metadataにflex_roleというものを設定し、それを引っ張ってくるようにしています。

おまけでimage_url属性に入れる値をAuth0ユーザーのpictureに設定されているものにしました。

Auth0のユーザーのapp_metadataを設定する

作成したアプリケーションのコネクションに紐づいている既存ユーザー、または新規ユーザーの作成を行い、

app_metadataの設定をします。

{
  "flex_role": [
    "agent"
  ]
}

flex_roleの値にagent,admin,supervisorの中から好きなものを設定します。

Flexの構成

FlexでSSOの設定を行います。

https://www.twilio.com/console/flex/single-sign-onに遷移し、以下の設定を行います。

FRIENDLY NAME
- Auth0がIDPだとわかるような名前をつけます
x.509 Certificate
- Auth0からダウンロードしたIdentity Provider Certificate(.pemファイル)をお気に入りのテキストエディターで開き、すべてのダッシュを含むファイルの内容全体をコピーして貼り付けます
IDENTITY PROVIDER ISSUER
- Auth0のアプリケーションで控えたIssuerを設定します
SINGLE SIGN-ON URL
- Auth0のアプリケーションで控えたIdentity Provider Login URLを設定します
DEFAULT REDIRECT URL
- https://flex.twilio.com/<your runtime domain>
- https://www.twilio.com/console/flex/single-sign-onに記載されているLogin Linkを設定します
TWILIO SSO URL
- Uses iam.twilio.comを選択します